<template>
  <div class="assessment">
    <el-card class="card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程考核管理</el-breadcrumb-item>
        </el-breadcrumb>
      <template>
        <div v-show="table">
          <!-- 搜索框 -->
          <div class="user-search">
            <el-input
            clearable
            placeholder="请输入课程名"
            v-model="query"
            class="input-with-select"
            @clear="getassessmentclear()"
            @input="getassessmentlist()"
            >
            </el-input>
            <!-- <el-button type="success" class="user-btn" @click="addbtn()">添加课程考核</el-button> -->
          </div>
          <div class="text">
            <!-- 列表信息 -->
            <el-table
              :data="list"
              stripe
              style="width: 100%"
              height="470"
              v-loading="loading"
              >
              <el-table-column
                type="index"
                width="40"
              >
              </el-table-column>
              <el-table-column
                label="课程编号"
                width="180"
                prop="number"
                >
              </el-table-column>
              <el-table-column
                label="课程名"
                width="400"
                prop="name"
                >
              </el-table-column>
               <el-table-column
                label="版本号"
                width="220"
                prop="version"
                >
              </el-table-column>
              <el-table-column
              prop="editor"
              label="课程考核"
              >
                <template slot-scope="scope">
                  <el-button
                  size="mini"
                  plain
                  type="primary"
                  icon="el-icon-view"
                  circle
                  @click="watch(scope.row)"
                  >
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
           <!-- 分页组件 -->
          <div class="Conpager">
            <el-pagination
            class='stu-pager'
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 课程考核 -->
        <div v-show="exambox">
          <div class="user-search">
            <el-input
            disabled
            v-model="Course"
            class="input-with-select"
            >
            </el-input>
            <el-button type="success" class="addexam-btn" @click="addexam()">添加考核</el-button>
            <el-button type="warning" class="addexam-btn" @click="editorbtn()">编辑考核</el-button>
            <el-button type="primary" class="back-btn" @click="back()">返回</el-button>
          </div>
          <div class="testcolor">*所有考核方式权重相加应为1</div>
          <div class="text">
            <el-table
            :data="examlist"
            stripe
            height="480"
            style="width: 100%"
            >
              <el-table-column
                type="index"
                width="40"
              >
              </el-table-column>
              <el-table-column
                label="考核方式"
                width="180"
                prop="way"
                >
              </el-table-column>
              <el-table-column
                label="权重"
                width="620"
                prop="weight"
                >
              </el-table-column>
              <el-table-column
              prop="editor"
              label="编辑"
              >
                <template slot-scope="scope">
                  <el-button
                  size="mini"
                  plain
                  type="info"
                  icon="el-icon-menu"
                  circle
                  @click="OpenInfo(scope.row)"
                  >
                  </el-button>
                  <el-button
                  size="mini"
                  plain type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteOpen(scope.row)"
                  >
                  </el-button>
                </template>
              </el-table-column>
           </el-table>
          </div>
        </div>
      </template>
      <!-- 添加组件 -->
      <el-drawer
      title="添加课程考核"
      :visible.sync="dialogFormVisibleAdd"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item label="课程名" :label-width="formLabelWidth">
              <el-input v-model="form.courseName" autocomplete="off" style="width:300px" disabled></el-input>
            </el-form-item>
            <div class="testcolor">*考核权重请输入小于等于1的数字</div>
          </el-form>
          <template>
            <div class="detailbox">
              <el-table :data="form.exams" height="380">
                <el-table-column prop="name" label="考核">
                  <template  slot-scope="scope">
                    <el-input v-model="form.exams[scope.$index].way"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="age" label="权重">
                  <template  slot-scope="scope">
                    <el-input v-model="form.exams[scope.$index].weight"></el-input>
                  </template>
                </el-table-column>
                 <el-table-column prop="delete">
                  <template  slot-scope="scope">
                    <el-link
                    :underline=false
                    @click="deleteNew(scope.$index)"
                    >
                    关闭
                    </el-link>
                  </template>
                </el-table-column>
              </el-table>
              <div class="addDetail">
                <el-link icon="el-icon-edit" :underline=false @click="addnews()" title="重复点击，一次可添加多个考核">新增</el-link>
              </div>
            </div>
          </template>
        </div>
        <div class="demo-drawer__footer">
            <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
            <el-button type="primary" @click="addform()">确定</el-button>
          </div>
      </el-drawer>
      <el-drawer
      title="编辑课程考核"
      :visible.sync="editorExams"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="editExamsform">
            <el-form-item label="课程名" :label-width="formLabelWidth">
              <el-input v-model="editExamsform.courseName" autocomplete="off" style="width:300px" disabled></el-input>
            </el-form-item>
            <div class="testcolor">*考核权重请输入小于等于1的数字</div>
          </el-form>
          <template>
            <div class="detailbox">
              <el-table :data="editExamsform.exams" height="380">
                <el-table-column prop="name" label="考核">
                  <template  slot-scope="scope">
                    <el-input v-model="editExamsform.exams[scope.$index].way"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="age" label="权重">
                  <template  slot-scope="scope">
                    <el-input v-model="editExamsform.exams[scope.$index].weight"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </div>
        <div class="demo-drawer__footer">
            <el-button @click="editorExams = false">取 消</el-button>
            <el-button type="primary" @click="sureEditExams()">确定</el-button>
          </div>
      </el-drawer>
      <!-- 课程与考核相关信息管理 -->
      <el-drawer
      title="课程考核细则管理"
      :visible.sync="editdialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
      >
       <!-- style="min-width:1400px" -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="changetabs">
          <el-tab-pane label="新增考核细则" name="first">
            <!-- 新增细则板块 -->
            <div>
                <template>
                  <div class="demo-drawer__content">
                    <el-form :model="editform">
                      <el-form-item label="考核方式" :label-width="formLabelWidth">
                        <el-input v-model="editform.exam.way" autocomplete="off" style="width:300px" disabled></el-input>
                      </el-form-item>
                      <!-- <el-form-item label="权重" :label-width="formLabelWidth">
                        <el-input v-model="editform.exam.weight" autocomplete="off" style="width:300px" disabled></el-input>
                      </el-form-item> -->
                      <div class="testcolor">*所有考核细则权重相加应为1</div>
                      <div class="testcolor">*细则所关联的目标必须是课程所关联过的目标</div>
                    </el-form>
                    <template>
                      <el-table :data="editform.details" height="200">
                        <el-table-column type="index" label="" width="40"></el-table-column>
                        <el-table-column property="way" label="细则" width="120"></el-table-column>
                        <el-table-column property="weight" label="目标权重" width="120"></el-table-column>
                        <el-table-column property="aim" label="关联目标" width="180"></el-table-column>
                        <el-table-column property="content" label="编辑">
                          <template slot-scope="scope">
                            <el-link icon="el-icon-delete" type="danger" :underline=false @click="delelteDetail(scope.row)"></el-link>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div style="text-align:right;padding-right:10px">
                        <el-link icon="el-icon-edit" :underline=false @click="add()" title="重复点击，一次可添加多个细则">新增</el-link>
                      </div>
                      <div style="height:164px">
                        <el-form v-model="newDetailform" style="height:164px;overflow:auto" v-show="addNewsdetails">
                          <div v-for="(item, index) in newDetailform" :key="index">
                            <div style="padding:5px 0 5px 20px">
                              <el-input v-model="item.way" placeholder="请输入考核" style="width:150px;display:inline-block"></el-input>
                              <el-input v-model="item.weight" placeholder="请输入权重" style="width:150px;display:inline-block"></el-input>
                              <el-select v-model="item.aimId" placeholder="请选择关联目标"  style="width:160px">
                                <el-option v-for="aim of aimlist" :key="aim.$index" :label="aim.name" :value="aim.aid"></el-option>
                              </el-select>
                              <el-link :underline=false @click="deleteRow(index)">&nbsp;&nbsp;关闭</el-link>
                            </div>
                          </div>
                        </el-form>
                      </div>
                    </template>
                  </div>
                  <div class="demo-drawer__footer">
                      <el-button @click="editdialog = false">取 消</el-button>
                      <el-button type="success" @click="addDetailave()">保存</el-button>
                  </div>
                </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="修改考核细则" name="second">
            <!-- 修改细则板块 -->
            <div>
              <div class="demo-drawer__content">
                <el-form :model="editform">
                  <el-form-item label="考核方式" :label-width="formLabelWidth">
                    <el-input v-model="editform.exam.way" autocomplete="off" style="width:300px" disabled></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="权重" :label-width="formLabelWidth">
                    <el-input v-model="editform.exam.weight" autocomplete="off" style="width:300px" disabled></el-input>
                  </el-form-item> -->
                  <div class="testcolor">*所有考核细则权重相加应为1</div>
                  <div class="testcolor">*细则所关联的目标必须是课程所关联过的目标</div>
                </el-form>
                <!--细则板块 -->
                <template>
                  <template class="detailbox">
                    <el-table :data="editform.details" height="380">
                      <el-table-column type="index" label="" width="55"></el-table-column>
                      <el-table-column prop="name" label="考核细项">
                        <template  slot-scope="scope">
                          <el-input v-model="editform.details[scope.$index].way"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="age" label="权重">
                        <template  slot-scope="scope">
                          <el-input v-model="editform.details[scope.$index].weight"></el-input>
                        </template>
                      </el-table-column>
                       <el-table-column prop="age" label="关联目标">
                        <template  slot-scope="scope">
                          <el-select  v-model="editform.details[scope.$index].aimId" placeholder="请选择关联目标"  style="width:160px">
                            <el-option v-for="aim of aimlist" :key="aim.$index" :label="aim.name" :value="aim.aid"></el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </template>
              </div>
              <div class="demo-drawer__footer">
                  <el-button @click="editdialog = false">取 消</el-button>
                  <el-button type="primary" @click="updatedinfo()">确定</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'assessment',
  data () {
    return {
      activeName: 'first',
      // addDetailBox: false,
      // updateDetailBox: true,
      loading: false,
      table: true,
      exambox: false,
      aimlist: [],
      cid: '',
      courseName: '',
      version: '',
      query: '',
      list: [],
      examlist: [],
      eid: '',
      did: '',
      pageNum: 1,
      pageSize: 8,
      totalCount: -1,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      editdialog: false,
      editorExams: false,
      addNewsdetails: false,
      editform: {
        exam: {
          way: '',
          weight: ''
        },
        details: []
      },
      editExamsform: {},
      newDetailform: [],
      form: {
        courseName: '',
        exams: []
      },
      formLabelWidth: '120px',
      examWay: '',
      examWeight: '',
      Info: {}
    }
  },
  components: {},
  watch: {
    editdialog: function (newvalue, oldvalue) {
      // console.log(newvalue, oldvalue)
      this.addNewsdetails = false
      this.newDetailform = []
      this.activeName = 'first'
    }
  },
  computed: {
    Course () {
      return this.courseName + '  ' + this.version
    }
  },
  mounted () {
    this.loading = true
  },
  methods: {
    // 获取所有课程
    async getassessmentlist () {
      // 需要授权的API必须设置请求头
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`course/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&name=${this.query}`)
      console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.list = page.list
        this.totalCount = page.totalCount
        this.loading = false
      } else {
        this.$message.error(msg)
        this.loading = false
      }
    },
    // 获取目标信息
    async getaimlist () {
      const res = await this.$http.get(`course_aim/info/${this.cid}`)
      console.log(res)
      const {code, msg, info} = res.data
      if (code === 200) {
        this.aimlist = info
      } else {
        console.log(msg)
      }
    },
    // 清空搜索框
    getassessmentclear () {
      this.getassessmentlist()
    },
    // 添加课程考核
    addexam () {
      this.form = {
        courseName: this.courseName,
        exams: []
      }
      this.dialogFormVisibleAdd = true
    },
    async addform () {
      const upform = {
        courseId: this.cid,
        exams: this.form.exams
      }
      // console.log(upform)
      const res = await this.$http.post('course_exam/save', upform)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('添加成功！')
        this.dialogFormVisibleAdd = false
        this.$http.get(`course_exam/info/${this.cid}`).then((res) => {
          // console.log(res)
          const {code, msg, info} = res.data
          if (code === 200) {
            if (info.exams) {
              // console.log(info.exams)
              this.examlist = info.exams
            } else {
              this.examlist = []
            }
          } else {
            console.log(msg)
            this.examlist = []
          }
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getcourselist()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      // console.log(`当前页: ${val}`)
      this.getcourselistt()
    },
    // 打开课程考核细则管理
    async OpenInfo (mess) {
      this.getaimlist()
      this.editdialog = true
      this.eid = mess.eid
      this.examWay = mess.way
      this.examWeight = mess.weight
      const res = await this.$http.get(`exam_detail/info/${this.eid}`)
      // console.log(res)
      const {code, msg, info} = res.data
      if (code === 200) {
        this.editform = info
      } else {
        this.editform = {
          exam: {
            way: mess.way,
            weight: mess.weight
          },
          details: []
        }
        this.$message.error(msg)
      }
    },
    // 打开课程下的考核
    async watch (mess) {
      this.table = false
      this.exambox = true
      // console.log(info)
      this.cid = mess.cid
      this.courseName = mess.name
      this.version = mess.version
      const res = await this.$http.get(`course_exam/info/${this.cid}`)
      // console.log(res)
      const {code, msg, info} = res.data
      if (code === 200) {
        if (info.exams) {
          this.Info = info
          // console.log('info', info)
          // console.log(info.exams)
          this.examlist = info.exams
          // this.examsdata = info.exams
          // console.log(this.examsdata)
        } else {
          this.Info = {}
          this.examlist = []
        }
      } else {
        this.$message.error(msg)
        this.Info = {}
        this.examlist = []
      }
    },
    // 返回
    back () {
      this.exambox = false
      this.table = true
    },
    // 编辑考核
    editorbtn () {
      this.editorExams = true
      this.editExamsform = {
        courseName: this.courseName,
        exams: this.Info.exams
      }
      // console.log('编辑考核', this.editExamsform)
    },
    // 保存编辑考核
    async sureEditExams () {
      const Form = {
        courseId: this.cid,
        exams: this.editExamsform.exams
      }
      // console.log(Form)
      const res = await this.$http.put('course_exam/update', Form)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('编辑成功！')
        this.editorExams = false
        this.$http.get(`course_exam/info/${this.cid}`).then((res) => {
          // console.log(res)
          const {code, msg, info} = res.data
          if (code === 200) {
            if (info.exams) {
              // console.log(info.exams)
              this.examlist = info.exams
            } else {
              this.examlist = []
            }
          } else {
            console.log(msg)
            this.examlist = []
          }
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 删除考核
    deleteOpen (info) {
      this.$confirm('此操作将永久删除该考核, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const eid = info.eid
        const res = await this.$http.delete(`course_exam/delete?examId=${eid}&courseId=${this.cid}`)
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`course_exam/info/${this.cid}`).then((res) => {
            // console.log(res)
            const {code, msg, info} = res.data
            if (code === 200) {
              if (info.exams) {
                // console.log(info.exams)
                this.examlist = info.exams
              } else {
                this.examlist = []
              }
            } else {
              console.log(msg)
              this.examlist = []
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 添加细则
    add () {
      this.addNewsdetails = true
      this.newDetailform.push({})
    },
    // 删除空行
    deleteRow (index) {
      this.newDetailform.splice(index, 1)
    },
    // 添加新增考核框
    addnews () {
      this.form.exams.push({})
    },
    // 删除新增考核空行
    deleteNew (index) {
      this.form.exams.splice(index, 1)
    },
    // 删除细则
    delelteDetail (mes) {
      // console.log(mes)
      this.$confirm('此操作将永久删除该考核细项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const did = mes.detailId
        const res = await this.$http.delete('detail/delete', {data: {id: this.eid, ids: [did]}})
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`exam_detail/info/${this.eid}`).then((res) => {
            const {code, msg, info} = res.data
            if (code === 200) {
              this.editform = info
            } else {
              this.editform = {
                exam: {
                  way: this.way,
                  weight: this.weight
                },
                details: []
              }
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 修改考核细则编辑
    async updatedinfo () {
      const list = []
      for (var i = 0; i < this.editform.details.length; i++) {
        list.push({detailId: this.editform.details[i].detailId, way: this.editform.details[i].way, weight: this.editform.details[i].weight, aimId: this.editform.details[i].aimId})
      }
      const form = {
        cid: this.cid,
        details: list,
        exam: {
          eid: this.eid,
          way: this.editform.exam.way,
          weight: this.editform.exam.weight
        }
      }
      // console.log(form)
      const res = await this.$http.put(`exam_detail/update`, form)
      // console.log(res)
      const {code, msg} = res.data
      if (code === 200) {
        this.$message.success('修改成功！')
        // this.editdialog = false
        this.addNewsdetails = false
        this.newDetailform = [
          {
            aimId: '',
            way: '',
            weight: ''
          }
        ]
        this.$http.get(`exam_detail/info/${this.eid}`).then((res) => {
          const {code, msg, info} = res.data
          if (code === 200) {
            this.editform = info
          } else {
            this.editform = {
              exam: {
                way: this.way,
                weight: this.weight
              },
              details: []
            }
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 保存新增考核细则
    async addDetailave () {
      const form = {
        cid: this.cid,
        details: this.newDetailform,
        exam: {
          eid: this.eid,
          way: this.editform.exam.way,
          weight: this.editform.exam.weight
        }
      }
      // console.log(form)
      const res = await this.$http.post(`exam_detail/save`, form)
      // console.log(res)
      const {code, msg} = res.data
      if (code === 200) {
        this.$message.success('添加成功！')
        // this.editdialog = false
        this.addNewsdetails = false
        this.newDetailform = [
          {
            aimId: '',
            way: '',
            weight: ''
          }
        ]
        this.$http.get(`exam_detail/info/${this.eid}`).then((res) => {
          // console.log(123, res)
          const {code, msg, info} = res.data
          if (code === 200) {
            this.editform = info
          } else {
            this.editform = {
              exam: {
                way: this.way,
                weight: this.weight
              },
              details: []
            }
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 点击切换板块
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  },
  created () {
    this.getassessmentlist()
  }
}
</script>

<style scoped lang="stylus">
.assessment,.card
  height 100%
  min-width: 1200px
  .user-search
    margin-top 15px
    width 100%
    .input-with-select
      width 300px
    .user-btn
      width 130px
      text-align center
.back-btn
  width 70px
  text-align center
.addexam-btn
  width 100px
  text-align center
.detailbox
  margin:0 10px
  height:500px
.addDetail
  text-align right
  margin-right 10px
  padding-top 15px
.testcolor
  margin-left 10px
  padding-top 5px
  font-size 13px
  color red
.text
  height 470px
  padding-top 10px
  .demo-table-expand
    font-size 0
  .demo-table-expand label
    width 90px
    color #99a9bf
  .demo-table-expand .el-form-item
    margin-right 0
    margin-bottom 0
    width 50%
.Conpager
  margin 0 auto
  padding-top 5px
  .stu-pager
    margin-top 54px
    text-align center
.changetabs
  padding-left 10px
.demo-drawer__footer
  text-align right
  padding 10px 10px 0 0
</style>
